<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/tag_lib.jsp"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>스프링 테스트 예제</title>
        <script type="text/javascript">
	        var map;
	        var geocoder;
	            
	        function initialize() {
	            if (GBrowserIsCompatible()) {        
	                map = new GMap2(document.getElementById("map_canvas"));
	                map.setCenter(new GLatLng(37.4993106, 127.0352316), 17);
	                map.setUIToDefault();
	                geocoder = new GClientGeocoder();
	            } else {
	                alert("Sorry, the Google Maps API is not compatible with this browser");
	            }
	        }    
	
	        function moveTo(lat, lng) {
	            if (GBrowserIsCompatible()) {        
	                var point = new GLatLng(lat, lng);
	            	var marker = createMarker(point,'uzen');
	                map.addOverlay(marker);
	                map.setCenter(point, 18);
	                //marker.openInfoWindowHtml("<font color='red'>UZEN!</font>");
	            } else {
	                alert("Sorry, the Google Maps API is not compatible with this browser");
	            }
	        }
	
	        function createMarker(point, html) {
	            var marker = new GMarker(point);
	            GEvent.addListener(marker, "click", 
	                function() {
	                    marker.openInfoWindowHtml(html);
	                }
	            );
	            return marker;
	        }
	
	        function search() {
	            var address = document.getElementById("address").value; 
	            var map = new GMap2(document.getElementById("map_canvas"));
	            var geocoder = new GClientGeocoder();
	            geocoder.getLatLng(address, 
	                function (point){
	                    if (!point) {
	                        alert(address + " not found");
	                    } else { 
	                        map.setCenter(point, 18);
	                        map.setUIToDefault();
	                            
	                        var marker = new GMarker(point);
	                        map.addOverlay(marker);
	                        marker.openInfoWindowHtml(address)
	                    }
	                }
	            );
	        }        

	        // jQuery 
            $(document).ready(function () {
            	initialize();

                $("#addFile").click(function () {
                  $("#attached").append("<input type='file' name='' id='' />");
                });

                $("#addMap").click(function () {
                    alert("addMap");
                    // $("#attached").append();
                });
            });
        </script>
	</head>
    <body onunload="GUnload()">
	    Article Read<br/>
        <hr />
        <table>
            <tbody>
                <tr>
                    <th>[Board No]Article No</th>
                    <td>[${article.boardNo}]${article.articleNo}</td>
                    <th>Thread- Parent Article No - Article Order</th>
                    <td>${article.thread} - ${article.parentArticleNo} - ${article.articleOrder}</td>
                </tr>
                <tr>
                    <th>Title</th>
                    <td colspan="2">${article.title}</td>
                </tr>
                <tr>
                    <th>Content</th>
                    <td colspan="2">${article.content}</td>
                </tr>
                <tr>
                    <th>Notice Flag</th>
                    <td>${article.noticeFlag}</td>
                    <th>Answer Flag</th>
                    <td>${article.answerFlag}</td>
                </tr>
                <tr>
                    <th>Creator No</th>
                    <td>${article.creatorNo}</td>
                    <th>Created Datetime</th>
                    <td>${article.createdDatetime}</td>
                </tr>
                <c:if test="${!empty attachedList}">
		            <c:forEach var="attached" items="${attachedList}">
		                <tr>
	                        <c:if test="${attached.attachedType == 1}">URL
	                           <th>URL</th>
	                           <td colsapn="3">${attached.attachedValue}</td>
	                        </c:if>
	                        <c:if test="${attached.attachedType == 2}">
    		                    <th>FileName</th>
	                            <td colsapn="3">${attached.attachedValue}--링크필요</td>
	                        </c:if>
	                        <c:if test="${attached.attachedType == 3}">
	                            <th>Location</th>
	                            <td colsapn="3">
	                                ${attached.attachedValue} - ${attached.attachedValue2}
	                                <script type="text/javascript">
	                                    $(document).ready(function () {
	                                    	moveTo(${attached.attachedValue}, ${attached.attachedValue2});
	                                    });
	                                </script>
	                            </td>
	                        </c:if>
		                </tr>
		            </c:forEach>
		        </c:if>
            </tbody>
        </table>
        <hr />
        <div id="map_canvas" style="width: 500px; height: 300px"></div>
        <hr />
        <a href="./createForm.jude">Create article</a>
        <a href="./replyForm.jude?parentArticleNo=${article.articleNo}&boardNo=${article.boardNo}">Reply article</a>
        <a href="./form.jude?parentArticleNo=${article.articleNo}&boardNo=${article.boardNo}&mode=reply">Form(Reply) article</a>
        <a href="./modifyForm.jude?articleNo=${article.articleNo}&boardNo=${article.boardNo}">Modify article</a>
        <a href="./form.jude?articleNo=${article.articleNo}&boardNo=${article.boardNo}&mode=modify">Form(Modify) article</a>
        <a href="./list.jude?boardNo=${article.boardNo}">List article</a>
        <a href="./delete.jude?articleNo=${article.articleNo}&boardNo=${article.boardNo}">Delete article</a>
	</body>
</html>